<template>
    <div class="home" >
        <div class="banner" >
            <div style="" class="association">
                <h1 class="association-title">机电云开发协会工作坊</h1>
                <!--<p>欢迎来到机电云开发协会工作官网</p>-->
            </div>
            <div id="scroll_down" >
                <i class="el-icon-arrow-down scroll_down"></i>
            </div>
        </div>
        <el-container class="el-container-hr">
            <el-container>
                <el-header>
                    <span>云开发设计大赛</span>
                </el-header>
                <el-main class="el-main2" style="position: relative;background-color: rgba(0,0,0,0)">
                        <div class="kf">
                            <ul class="quan">
                                <li><router-link :to="{name:'apply'}">参赛报名</router-link></li>
                                <li><router-link :to="{name:'apply'}">参赛报名</router-link></li>
                                <li><router-link :to="{name:'apply'}">往期作品</router-link></li>
                                <li><router-link :to="{name:'apply'}">往期作品</router-link></li>
                                <li></li>
                            </ul>
                        </div>
                    <!--<el-row :gutter="20">-->
                        <!--<el-col :span="10">-->
                            <!--<div class="grid-content typing_col">报名</div>-->
                        <!--</el-col>-->
                        <!--<el-col :span="10">-->
                            <!--<div class="grid-content typing_col">往期作品</div>-->
                        <!--</el-col>-->
                    <!--</el-row>-->
                </el-main>
                <!--<el-footer>-->
                <!--<el-row :gutter="20">-->
                <!--<el-col :span="12"><div class="grid-content ">-->
                <!--&lt;!&ndash;<a href="https://gdmecst-test-5rmth-1300726000.tcloudbaseapp.com/vue/#/list" style="font-size: 16pt;color: blue">训练榜单</a>&ndash;&gt;-->
                <!--<router-link :to="{name:'list'}">训练榜单</router-link>-->
                <!--</div></el-col>-->
                <!--<el-col :span="12"><div class="grid-content ">-->
                <!--&lt;!&ndash;<a href="https://gdmecst-test-5rmth-1300726000.tcloudbaseapp.com/vue/#/list" style="font-size: 16pt;color: blue">训练榜单</a>&ndash;&gt;-->
                <!--<router-link :to="{name:'list_contest'}">比赛榜单</router-link>-->
                <!--</div></el-col>-->
                <!--</el-row>-->
                <!--&lt;!&ndash;<a href="https://gdmecst-test-5rmth-1300726000.tcloudbaseapp.com/vue/#/list" style="font-size: 16pt;color: blue">训练榜单</a>&ndash;&gt;-->
                <!--&lt;!&ndash;<a href="https://gdmecst-test-5rmth-1300726000.tcloudbaseapp.com/vue/#/list" style="font-size: 16pt;color: blue">比赛榜单</a>&ndash;&gt;-->
                <!--</el-footer>-->
            </el-container>
        </el-container>
        <el-container class="el-container-hr">
                <el-container>
                    <el-header>
                        <span>挑战速度，超越自我！</span>
                    </el-header>
                    <el-main style="position: relative;">
                        <!--main-->
                        <!--<router-link :to="{name:'typing'}">暂时文字替代跳转页面</router-link>-->
                        <!--<div class="div-hr"></div>-->
                        <el-row :gutter="20">
                        <el-col :span="8" class="typing_div">
                            <div class="grid-content typing_col">看打</div>
                            <div class="gray">
                                <ul class="gray_line">
                                    <a @click="open('look_typing')">训练</a>
                                    <router-link :to="{name:'look_typing',query:{begin:'true'}}">比赛</router-link>
                                </ul>
                                <!--<router-link to="/list">训练</router-link>-->
                                <!--<router-link to="/list">比赛</router-link>-->
                                <!--<router-link to="/list">训练榜单</router-link>-->
                            </div>
                        </el-col>
                        <el-col :span="8" class="typing_div">
                            <div class="grid-content typing_col">听打</div>
                            <div class="gray">
                                <ul class="gray_line">
                                    <a @click="open('hear_typing')">训练</a>
                                    <router-link :to="{name:'hear_typing',query:{begin:'true'}}">比赛</router-link>
                                </ul>
                            </div></el-col>
                        <el-col :span="8" class="typing_div">
                            <div class="grid-content typing_col">盲听打</div>
                            <div class="gray">
                                <ul class="gray_line">
                                    <a @click="open('blind_typing')">训练</a>
                                    <router-link :to="{name:'blind_typing',query:{begin:'true'}}">比赛</router-link>

                                </ul>
                            </div></el-col>
                        </el-row>
                    </el-main>
                    <el-footer>
                        <el-row :gutter="20">
                            <el-col :span="12"><div class="grid-content ">
                                <!--<a href="https://gdmecst-test-5rmth-1300726000.tcloudbaseapp.com/vue/#/list" style="font-size: 16pt;color: blue">训练榜单</a>-->
                                <router-link :to="{name:'list'}">训练榜单</router-link>
                            </div></el-col>
                            <el-col :span="12"><div class="grid-content ">
                                <!--<a href="https://gdmecst-test-5rmth-1300726000.tcloudbaseapp.com/vue/#/list" style="font-size: 16pt;color: blue">训练榜单</a>-->
                                <router-link :to="{name:'list_contest'}">比赛榜单</router-link>
                            </div></el-col>
                        </el-row>
                        <!--<a href="https://gdmecst-test-5rmth-1300726000.tcloudbaseapp.com/vue/#/list" style="font-size: 16pt;color: blue">训练榜单</a>-->
                        <!--<a href="https://gdmecst-test-5rmth-1300726000.tcloudbaseapp.com/vue/#/list" style="font-size: 16pt;color: blue">比赛榜单</a>-->
                    </el-footer>
                </el-container>
            </el-container>
        <content-vue></content-vue>
        <div class="body-bg"></div>
    </div>
</template>

<script>
    import $ from 'jquery'
    import contenta from '../assets/views/home/content'
    export default {
        name: "home",
        components:{
            contentVue: contenta,
        },
        data(){
            return {
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            }

        },
        async created(){
            $('html,body').scrollTop(0)
            // await this.$cloudbase
            //     .auth({ persistence: "local" })
            //     .anonymousAuthProvider()
            //     .signIn();
            //
            // let _ = this.$cloudbase.database().command
            // await  this.$cloudbase
            //     .database()
            //     .collection('typing')
            //     .where({speed:_.gte(0)})
            //     .remove()
            //     .then((res) => {
            //         console.log(res);
            //     });
            // res = await this.$cloudbase
                // .database()
                // .collection('ykf_student')
                // .where({Student_number:'07190749赵旭东'})
                // .get();
        },
        methods:{
            open(type) {
                let that = this
                this.$prompt('设定训练时间', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[1-9][0-9]{0,}$/,
                    inputErrorMessage: '请输入纯数字'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '你设置的时间是: ' + value,
                    })
                    that.$router.push({name:type,query:{time:value}})
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        },
        mounted(){

            $('.scroll_down').click(function () {
                let coverOffset = $('.el-container').offset().top
                $('html,body').animate({
                    scrollTop:coverOffset
                })
            })
            // let coverOffset = $('.main-wrapper').offset().top
            // $('html,body').animate({
            //     scrollTop: coverOffset
            // },600)
            // $('.typing_col').mouseover(function () {
            //     // console.log(this.parentNode.children[1])
            //     // $('.gray').css({"opacity":"1","visibility":"initial"})
            //     console.log(1)
            //     this.parentNode.children[1].style.opacity=1
            //     this.parentNode.children[1].style.visibility='initial'
            // })
            // $('.gray').mouseout(function () {
            //
            //     this.parentNode.children[1].style.opacity=0
            //     this.parentNode.children[1].style.visibility='hidden'
            //     // $('.gray').css({"opacity":"0","visibility":"hidden"})
            //     // console.log(2)
            // })
    },
        computed: {
        }
    }

</script>

<style scoped >
    @import '../assets/css/home/home.css';
    .el-container-hr{
        margin-top: 50px;
    }
    .home{

        /*margin-top: 50px;*/
        margin-top: 0 !important;
        /*background-image: url("https://cdn.jsdelivr.net/gh/xb2016/kratos-pjax@0.4.3/static/images/index_image.png");*/
    }
    section{
        /*background-color: black;"*/
    }
    .body-bg{
        /*background: url("https://cdn.jsdelivr.net/gh/xb2016/kratos-pjax@0.4.3/static/images/index_image.png") center center / cover no-repeat;*/
        /*background-color: rgba(25,29,45,0.7);*/
        background-image: radial-gradient(rgba(25,29,45,0.7),rgba(25,29,45,1));
        /*background-color: #191D36;*/
        opacity: 1;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -999999;
        height: 100vh;
        width: 100vw;
        transition: background .5s;
    }
    .home .banner{
        background: url(https://lovelijunyi.gitee.io/img/banner/1.jpg) no-repeat fixed top;
        /*background: url(./QQ图片20210516110613.jpg) no-repeat center;*/
        height: 100vh;
        width: 100%;
        min-height: 450px;
        margin-top: 0;
        color: #fff;
        position: relative;
        overflow: hidden;
        animation: a infinite forwards;
    }


    .el-row{
        display: flex;
        justify-content: center;
    }
    .el-col-8{
        width: 33.33333% !important;
    }

    .el-container{
        max-width: 1100px;
        margin: 1.5rem auto 0;
    }


    .el-main2{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .kf{
        width: 300px;
        height: 300px;
        position: relative;
    }
    .quan{
        width: 300px;
        height: 300px;
        transform-origin: center;
        position: relative;
        top: 0;
        left: 0;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        display: block;
        animation: a 5s linear infinite forwards;
        backface-visibility: visible;
    }
    .quan:hover{
        animation-play-state: paused;
    }
    .quan li{
        box-shadow: deepskyblue 0 0 10px 2px;
        display: block;
        position: absolute;
        width: 300px;
        height: 300px;
        top:0;
        left: 0;
        /*transform-style: preserve-3d;*/
        opacity: 0.7;
        backface-visibility:hidden;
        background-color: #141728;
        font-size: 48px;
        font-family: 楷体;
        color: white;
        line-height: 300px;
        transition:color .5s;
        font-weight: 700;
    }
    .quan a{
        color: white;
    }
    .quan li:hover a{
        color: deepskyblue;

    }
    .quan li:nth-child(1){
        /*background-image: url('C:/Users/10594/Desktop/man.jpg');*/
        background-size: 100% 100%;
        transform: translateZ(150px);
    }
    .quan li:nth-child(2){

        /*background-color: red;*/
        /*background-image: url('C:/Users/10594/Desktop/man.jpg');*/
        background-size: 100% 100%;
        transform: translateZ(-150px) rotateY(180deg);
    }
    .quan li:nth-child(3){
        /*background-image:url('C:/Users/10594/Desktop/man.jpg');*/
        /*background-color: blue;*/
        background-size: 100% 100%;
        transform: translateX(-150px) rotateY(-90deg);
    }
    .quan li:nth-child(4){
        /*background-color: green;*/
        transform: translateX(150px) rotateY(90deg);
        /*background-image:url('C:/Users/10594/Desktop/man.jpg');*/
        background-size: 100% 100%;
    }
    .quan li:nth-child(5){
        /*transform: translate3d(0px, 170px, -150px) rotateX(90deg) rotateZ(0deg) scale(0.94);*/
        background-color: black;
        opacity: .7;
        border-radius: 50%;
        filter: blur(50px);
        backface-visibility: visible;
        transform: translate3d(0px, 170px, 0)  rotateX(91deg)  rotateZ(0deg) scale(0.94);
    }

    img{
        width: 100%;
        height: 100%;
    }
    @keyframes a{
        from{
            transform: rotateY(0);
        }to{
             transform: rotateY(-360deg);
         }
    }



</style>